<div class="findtrs">
    <form action="" method="post">
        <div class="ftitle">
            <div class="lt">
                <h2>我的账号</h2>
            </div>
        </div>
        <div class="faccountnum">
            <div class="faccounlt">
                <div class="fwhorden fbai">
                    <div class="flt">
                        <div class="icon">
                            <a href="#"><img src="__STATIC__/lib/index/images/fimg16.jpg" alt=""></a>
                        </div>
                        <div class="txt">
                            <h3><a href="#">welcome to CardEcho</a></h3>
                            <div class="lst">
                                <ul>
                                    <li><a href="#">
                                        <img src="__STATIC__/lib/index/images/fn26.png" alt="">
                                        <img src="__STATIC__/lib/index/images/fn26-1.png" alt="">
                                    </a></li>
                                    <li><a href="#">
                                        <img src="__STATIC__/lib/index/images/fn27.png" alt="">
                                        <img src="__STATIC__/lib/index/images/fn27-1.png" alt="">
                                    </a></li>
                                    <li><a href="#">
                                        <img src="__STATIC__/lib/index/images/fn28.png" alt="">
                                        <img src="__STATIC__/lib/index/images/fn28-1.png" alt="">
                                    </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="frt">

                    </div>
                </div>
                <div class="faccount">
                    <div class="lts" style="background: url(__STATIC__/lib/index/images/fimg17.png) no-repeat center/cover;">
                        <h3>账户余额</h3>
                        <div class="accou">
                            <div class="ico"><img src="__STATIC__/lib/index/images/fd3.png" alt=""></div>
                            <h6>账户余额</h6>
                            <h3>{$list.balance}</h3>
                        </div>
                    </div>
                    <div class="rts">
                        <ul>
                            <li style="background: url(__STATIC__/lib/index/images/fimg18.png) no-repeat center/cover;">
                                <a href="#">
                                    <div class="txt">
                                        <h4>修改密码</h4>
                                        <h6>定期修改为高强度密码，以保护您的账号</h6>
                                    </div>
                                    <div class="xg edit_pwd">立即修改</div>
                                </a>
                            </li>
                            <li style="background: url(__STATIC__/lib/index/images/fimg19.png) no-repeat center/cover;">
                                <a href="#">
                                    <div class="txt">

                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="faccounrt">
                <div class="accoun">
                    <ul>
                        <li>
                            <div class="tt">
                                <div class="ic"><img src="__STATIC__/lib/index/images/fn29.png" alt=""></div>
                                <h4>卡位</h4>
                                <h5 style="cursor:pointer" id="kawei" onmouseover="shows('最大在线卡片数' , 'kawei')" onmouseleave="close_tips()"></h5>
                            </div>
                            <h3>{$card_max ?? 0}张</h3>
                        </li>
                        <li>
                            <div class="tt">
                                <div class="ic"><img src="__STATIC__/lib/index/images/fn30.png" alt=""></div>
                                <h4>开卡费</h4>
                                <h5 style="cursor:pointer" id="kaikafei" onmouseover="shows('每张申请卡片所需费用' , 'kaikafei')" onmouseleave="close_tips()"></h5>
                            </div>
                            <h3>$1 - 5/张</h3>
                        </li>
                        <li>
                            <div class="tt">
                                <div class="ic"><img src="__STATIC__/lib/index/images/fn31.png" alt=""></div>
                                <h4>服务费率</h4>
                                <h5 style="cursor:pointer" id="fuwufeilv" onmouseover="shows('卡片充值金额时收取' , 'fuwufeilv')" onmouseleave="close_tips()"></h5>
                            </div>
                            <h3>1 - 5 %</h3>
                        </li>
                    </ul>
                </div>
                <div class="frenzhen">
                    <h2>我的认证
                        {if $list.grade ==0}
                            (<span style="color: red;font-weight: bold">未认证</span>)
                        {else}
                            (<span style="color: green;font-weight: bold">已认证</span>)
                        {/if}
                    </h2>
                    <div class="list">
                        <ul>
                            <li>
                                <h5><img src="__STATIC__/lib/index/images/fn32.png" alt=""><i>国家</i></h5>
                                <h3>中国</h3>
                            </li>
                            <li>
                                <h5><img src="__STATIC__/lib/index/images/fn33.png" alt=""><i>姓名</i></h5>
                                <h3>{$name}</h3>
                            </li>
                            <li>
                                <h5><img src="__STATIC__/lib/index/images/fn34.png" alt=""><i>身份证号</i></h5>
                                <h3>{$id_card}</h3>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="fjournal">
            <div class="lt">
                <ul>
                    <li class="on"><a href="javascript:;">充值日志</a></li>
                    <li><a href="javascript:;">登录日志</a></li>
                </ul>
            </div>
            {if $list.grade == 0}
                <a href="{:url('user/cardCheck')}" class="ftianj"><i>实名认证</i></a>
            {/if}
            {if $list.grade == 1 && $list.grade_new ==0 }
                <a href="{:url('user/cardCheck')}" class="ftianj"><i>实名认证升级</i></a>
            {/if}
        </div>
        <div class="fbai">
            <div class="fdbtable fhbtable  qmbbds">
                <table border="0" cellspacing="0" cellpadding="0" width="100%" id="balanceTable1" lay-filter="balanceTable1">
                </table>
            </div>
            <div class="fdbtable fhbtable  qmbbds">
                <table border="0" cellspacing="0" cellpadding="0" width="100%" id="balanceTable2" lay-filter="balanceTable2">
                </table>
            </div>
            <!-- <div class="fzhanwu qmbbds">
                <img src="images/fic1.png"  alt=''>
                <h5>暂无数据</h5>
            </div> -->
        </div>
    </form>

</div>
<div class="mcadtanc mcadtanc1" id="rz_detail">
    <div class="hd">
        <h2>实名认证</h2>
        <div class="icons icons_rz"></div>
    </div>
    <div class="bd">
        <div class="ul clearfix">
            <div class="li">
                <h4>姓名<span style="color: red"> *</span></h4>
                <input type="text" name="rz_name" id="rz_name" maxlength="10" class="txt" placeholder="请填写姓名">
            </div>
            <div class="li">
                <h4>身份证号<span style="color: red"> *</span></h4>
                <input type="text" name="rz_card" id="rz_card" maxlength="18" class="txt" placeholder="请填写身份证号">
            </div>
        </div>
        <div class="umbtn umbtn1" id="rz_sub">立即认证</div>
    </div>
</div>
<div class="mcadtanc mcadtanc1" id="edit_pwd_detail">
    <div class="hd">
        <h2>修改密码</h2>
        <div class="icons icons_pwd"></div>
    </div>
    <div class="bd">
        <div class="ul clearfix">
            <div class="li">
                <h4>旧密码<span style="color: red"> *</span></h4>
                <input type="password" name="old_pwd" id="old_pwd" maxlength="20" class="txt" placeholder="请填写旧密码">
            </div>
            <div class="li">
                <h4>修改密码<span style="color: red"> *</span></h4>
                <input type="password" name="change_pwd" id="change_pwd" maxlength="20" class="txt" placeholder="请填写密码">
            </div>
            <div class="li">
                <h4>确认密码<span style="color: red"> *</span></h4>
                <input type="password" name="change_pwd_confirm" id="change_pwd_confirm" maxlength="20" class="txt" placeholder="确认密码">
            </div>
        </div>
        <div class="umbtn umbtn1" id="pwd_sub">提交</div>
    </div>
</div>

<div class="mcadtanc mcadtanc1" id="edit_pay_detail">
    <div class="hd">
        <h2>绑定支付宝|微信</h2>
        <div class="icons icons_pwd"></div>
    </div>
    <div class="bd">
        <div class="ul clearfix">
            <div class="li">
                <h4>支付宝(<span style="color: red">{if $list.alipay_name != '***'}已绑定{else}未绑定{/if}</span>)<span style="color: red"> *</span></h4>
                {if $list.alipay_name != '***'}
                <input type="text" value="{$list.alipay_name}" readonly maxlength="100" class="txt">
                {else}
                <input type="text" name="alipay_name" id="alipay_name" maxlength="100" class="txt" placeholder="请填写支付宝">
                {/if}
            </div>
            <div class="li">
                <h4>微信(<span style="color: red">{if $list.we_chat != '***'}已绑定{else}未绑定{/if}</span>)<span style="color: red"> *</span></h4>
                {if $list.we_chat != '***'}
                <input type="text" value="{$list.we_chat}" readonly maxlength="100" class="txt">
                {else}
                <input type="text" name="we_chat" id="we_chat" maxlength="100" class="txt" placeholder="请填写微信">
                {/if}
            </div>
        </div>
        <div class="umbtn umbtn1" id="pwd_pay_sub">提交</div>
    </div>
</div>

<script type="text/javascript">

    layui.use(['form',  'table'], function () {
        var form = layui.form,
            table = layui.table; //表格

        $("#rz_name").val('');
        $("#rz_card").val('');
        table.render({
            elem: '#balanceTable1',
            height: 'auto',
            cellMinWidth: '80',
            totalRow: true,
            method: 'post',
            url: "{:url('fundList')}",
            id: 'balanceTable1',
            text:{none: '无数据'},
            cols: [[
                { type: 'numbers'},
                { field: 'ctime', align: 'center', title: '提交时间' , width: 200,
                    templet: function (d) {
                        return layui.util.toDateString(d.ctime * 1000, "yyyy-MM-dd HH:mm:ss");
                    }
                },
                { field: 'ctime', align: 'center', title: '审核时间' , width: 200,
                    templet: function (d) {
                        var utime = d.utime;
                        if(utime == null){
                            return ' -- ';
                        }else{
                            return layui.util.toDateString(utime * 1000, "yyyy-MM-dd HH:mm:ss");
                        }
                    }
                },
                { field: '', align: 'left', title: '类型' ,width:150,
                    templet: function (d) {
                        const type_name = d.type;
                        if(type_name == 1){
                            return '<font color="red">Debit</font>';
                        }else{
                            return '<font color="green">Credit</font>';
                        }
                    },totalRowText:'Total Amount:'
                },
                {field: 'amount', title: '充值金额($)', align:"right",
                    style:'font-weight:bold',width:180,
                    templet: function (d) {
                        const type_name = d.type;
                        if(type_name == 1){
                            return '<span style="font-weight: bold;float: right;color:#FF5722;"> - ' + d.amount + '</span>';
                        }else{
                            return '<span style="float: right;color:#FF5722;">' + d.amount + '</span>';
                        }
                    },totalRow: true
                },
                { field: 'remark',  align: 'left', title: '错误备注'},
                { field: '', align: 'left', title: '充值状态',width:200,
                    templet: function (d) {
                        const check_status = d.check_status;
                        if(check_status == '1'){
                            return '<font color="green">Completed</font>';
                        }else if(check_status == '2'){
                            return '<font color="red">Failed</font>';
                        }else{
                            return '<font color="#a9a9a9">Pending</font>';
                        }
                    }
                },
            ]],
            page: true,
            limit: 10,
            limits: [10, 50 ,100 ],
        });
        table.render({
            elem: '#balanceTable2',
            height: 'auto',
            cellMinWidth: '80',
            totalRow: true,
            method: 'post',
            url: "{:url('userLog')}",
            id: 'balanceTable2',
            text:{none: '无数据'},
            cols: [[
                { type: 'numbers'},
                { field: 'ip', align: 'left', title: 'IP' },
                { field: 'ctime', align: 'left', title: '登录时间' ,
                    templet: function (d) {
                        return layui.util.toDateString(d.ctime * 1000, "yyyy-MM-dd HH:mm:ss");
                    }
                }
            ]],
            page: true,
            limit: 10,
            limits: [10, 50 ,100 ],
        });

        $(document).on('click', '#rz_sub', function () {
            var rz_name = $("#rz_name").val();
            var rz_card = $("#rz_card").val();
            var index = layer.load(1, {shade: [0.1, '#fff']});
            JsPost('{:url("user/rzSend")}', {rz_name:rz_name,rz_card:rz_card},function (re) {
                layer.close(index);
                if(re.code >0){
                    layer.msg(re.msg , {time:3500});
                    window.location.href = "{:url('account')}";
                }else{
                    layer.msg(re.msg, {time:1500});
                }
            });
        });

        $(document).on('click', '#pwd_sub', function () {
            const old_pwd  = $("#old_pwd").val();
            const change_pwd = $("#change_pwd").val();
            const change_pwd_confirm = $("#change_pwd_confirm").val();
            if(change_pwd != change_pwd_confirm){
                layer.msg('两次密码不一致', {time:1500});
                return false;
            }
            var index = layer.load(1, {shade: [0.1, '#fff']});
            JsPost('{:url("user/changePwd")}',
                {
                    old_pwd:old_pwd,
                    change_pwd:change_pwd,
                    change_pwd_confirm:change_pwd_confirm
                },function (re) {
                layer.close(index);
                if(re.code >0){
                    layer.msg(re.msg , {time:3500});
                    window.location.href = "{:url('account')}";
                }else{
                    layer.msg(re.msg, {time:1500});
                }
            });
        });

        $(document).on('click', '#pwd_pay_sub', function () {
            const alipay_name  = $("#alipay_name").val();
            const we_chat = $("#we_chat").val();
            var index = layer.load(1, {shade: [0.1, '#fff']});
            JsPost('{:url("user/changePay")}',
                {
                    alipay_name:alipay_name,
                    we_chat:we_chat,
                },function (re) {
                    layer.close(index);
                    if(re.code >0){
                        layer.msg(re.msg , {time:3500});
                        window.location.href = "{:url('account')}";
                    }else{
                        layer.msg(re.msg, {time:1500});
                    }
                });
        });

    });
    function shows(msg,id){
        layer.tips('' + msg, '#' + id ,{tips:[1,'blace'] , area:[100,40]});
    }
    function close_tips(){
        layer.closeAll();
    }
    $('.fjournal .lt ul li').click(function() {
        $('.fjournal .lt ul li').removeClass('on');
        $(this).addClass('on');
        $('.findtrs .qmbbds').hide();
        $('.findtrs .qmbbds').eq($(this).index()).show();
    })


    // $('.fjournal .ftianj').click(function(){
    //     const grade = '{$grade}';
    //     if(grade == '1'){
    //         layer.msg('用户已认证', {time:1500});
    //         return false;
    //     }
    //     $('.mcmask').show();
    //     $('#rz_detail').show();
    // })
    $('.mcadtanc .icons_rz').click(function(){
        $('.mcmask').hide();
        $('#rz_detail').hide();
    })

    $('.edit_pwd').click(function(){
        $('.mcmask').show();
        $('#edit_pwd_detail').show();
    })
    $('.mcadtanc .icons_pwd').click(function(){
        $('.mcmask').hide();
        $('#edit_pwd_detail').hide();
    })

    $('.edit_pay').click(function(){
        window.location.href = "{:url('user/userDetail')}";
    })

</script>